<template>
    <div class="ZYF-deviceinfo">
        <h3 class="h3">监测站点信息查询</h3>
        <div class="deviceinfo-from">
            <a-form-model layout="inline" :model="page" :colon="false">
                <a-form-model-item label="站点名称" :label-col="{span: 6}" :wrapper-col="{span: 16}">
                    <a-input v-model="page.monitorName" placeholder="请输入要查找的站点名称" allow-clear />
                </a-form-model-item>
                <a-form-model-item label="企业名称" :label-col="{span: 6}" :wrapper-col="{span: 16}">
                    <a-input v-model="page.companyName" placeholder="请输入要查找的企业名称" allow-clear />
                </a-form-model-item>
                <a-form-model-item>
                    <a-button type="primary" @click="onSubmit">查询</a-button>
                </a-form-model-item>
            </a-form-model>
            <a-button @click="addEquipmentFn" type="primary" v-if="isBtn">添加设备</a-button>
        </div>
        <div class="tableclass">
            <a-table style="height:98%" :columns="columns" size="middle" :rowKey="record=> record.id" :data-source="TableData" :pagination="false">
                <template slot="operate" slot-scope="text,record,index">
                    <div class="handle">
                        <span @click="editSubmit(record)" v-if="isBtn">修改设备信息</span>
                        <span @click="history(record)">历史数据</span>
                        <span @click="addSubmit(record)">详情</span>
                    </div>
                    <div class="handle">
                        <span @click="editDisabled(record)" v-if="isBtn">修改监测项</span>
                        <span @click="isEchartsFn(record,index)">查看图表</span>
                        <span @click="fileExport(record.id)">导出</span>
                    </div>
                </template>
            </a-table>
            <div class="content-bottom clearfix">
                <div class="page-box">
                    <a-pagination :show-total="total => `共 ${total} 条记录`" v-model="page.current" :total="total" :defaultPageSize="page.size" :item-render="itemRender" @change="pagechangeFn" hideOnSinglePage />
                </div>
            </div>
        </div>
        <add-pop ref="addPop" :applyType="applyType"></add-pop>
        <editPop ref="editPop" :editlist="editlist"></editPop>
        <edit-disabled ref="editDisabled"></edit-disabled>
        <!-- 历史信息弹框 -->
        <history-pop ref="historyRef"></history-pop>
        <!-- 详细信息弹框 -->
        <message-pop ref="messagepop" :DetailedData="DetailedData"></message-pop>
        <!-- 图表弹框 -->
        <echartesPop ref="echartsRef" :monitorData="monitorData"></echartesPop>
        <down-loasd ref="downLoasd"></down-loasd>
    </div>
</template>
<script>
import moment from "moment";
import addPop from "@/views/air/components/addPop";
import echartesPop from "@/views/air/components/echartesPop";
import historyPop from "@/views/air/components/historyPop";
import messagePop from "@/views/air/components/messagePop";
import downLoasd from "@/views/air/components/DownLoasdExcel";
import editPop from "@/views/air/components/editPop";
import editDisabled from "@/views/air/components/editDisabled";
export default {
    name: "deviceinfo",
    components: {
        addPop,
        historyPop,
        echartesPop,
        messagePop,
        downLoasd,
        editPop,
        editDisabled,
    },
    props:{
      equipmentTypeId:[String,Number],
      applyType:[String,Number]
    },
    data() {
        return {
            isBtn: true,
            // 设备表格字段
            columns: [
                {
                    title: "序号",
                    // dataIndex: "id",
                    align: "center",
                    width: "80px",
                    customRender: (text, record, index) =>
                        `${
                            (this.page.current - 1) * this.page.size + index + 1
                        }`,
                },
                {
                    title: "设备标识(MN)",
                    dataIndex: "equipmentSequence",
                    align: "center",
                    width: "160px",
                },
                {
                    title: "站点名称",
                    dataIndex: "monitorName",
                    align: "center",

                    ellipsis: true,
                },
                {
                    title: "企业名称",
                    dataIndex: "companyName",
                    align: "center",
                    ellipsis: true,
                },
                {
                    title: "投入时间",
                    dataIndex: "createTime",
                    align: "center",
                    ellipsis: true,
                    width: "200px",
                },
                {
                    title: "其他信息",
                    scopedSlots: {
                        customRender: "operate",
                    },
                    align: "center",
                    width: "240px",
                },
            ],
            TableData: [], // 分页表格数据
            // 设备信息分页查询
            page: {
                current: 1,
                size: 9,
                equipmentType: "",
                monitorName: "",
                companyName: "",
            },
            total: 0, // 设备总条数
            monitorData: [], // 图表弹窗警告类型数组
            DetailedData: {}, // 详细信息弹窗数据
            editlist: {}, // 修改数据
        };
    },
    methods: {
        fileExport(id) {
            this.$refs.downLoasd.isDown = true;
            this.$refs.downLoasd.id = id;
        },
        // 详细信息弹窗
        editSubmit(data) {
            console.log(data)
            var list = JSON.parse(JSON.stringify(data))
            list.createTime = moment(list.createTime)
            this.$refs.editPop.form = list;
            this.$refs.editPop.Companychange(data.monitorAreaId);
            this.$refs.editPop.init(data.id)
            this.$nextTick(() => {
                this.$refs.editPop.formDrawer = true;
                
            });
        },
        addSubmit(data) {
            this.DetailedData = data;
            this.$refs.messagepop.DetailedPop = true;
        },
        editDisabled(data) {
            this.$refs.editDisabled.isdisabled = true;
            this.$refs.editDisabled.equipmentId = data.id
            this.$refs.editDisabled.getTreeData();
            this.$refs.editDisabled.getData();
        },
        // 添加设备弹窗
        addEquipmentFn() {
            this.$refs.addPop.form.equipmentTypeId = this.equipmentTypeId;
            this.$refs.addPop.formDrawer = true;
        },
        // 历史弹窗
        history(data) {
            if (data.equipmentAbnormalInfoList.length <= 0) {
                this.$message.warning("此设备没有警告信息");
                return;
            }
            this.$refs.historyRef.historyForm.mn = data.equipmentSequence;
            this.$refs.historyRef.title = data.monitorName;
            this.$refs.historyRef.isHistory = true;
            this.$nextTick(() => {
                this.$refs.historyRef.init(data.id);
            });
        },
        // 图表弹框
        isEchartsFn(record) {
            // console.log(record);
            if (record.equipmentAbnormalInfoList.length <= 0) {
                this.$message.warning("此设备没有警告信息");
                return;
            }
            this.$refs.echartsRef.isEcharts = true;

            this.$refs.echartsRef.echartsFrom.mn = record.equipmentSequence;
            this.$refs.echartsRef.tableFrom.mn = record.equipmentSequence;
            this.$refs.echartsRef.echartsFrom.sampleType =
                record.equipmentAbnormalInfoList[0].waringCode;
            this.monitorData = record.equipmentAbnormalInfoList;
            this.$nextTick(() => {
                console.log("sss")
                this.$refs.echartsRef.init(record.id);
            });
        },
        // 搜索查询
        onSubmit() {
            this.page.current = 1;
            this.getdata();
        },

        // 分页方法
        itemRender(current, type, originalElement) {
            if (type === "prev") {
                return <a> 上一页 </a>;
            } else if (type === "next") {
                return <a> 下一页 </a>;
            }
            return originalElement;
        },
        pagechangeFn(page) {
            this.page.current = page;
            this.getdata();
        },
        // 获取数据
        getdata() {
            this.$api.Poll_postselect(this.page).then((res) => {
                if (res.data.code == 0) {
                    this.TableData = res.data.data;
                    this.TableData.forEach((v) => {
                        v.createTime = moment(parseInt(v.createTime)).format(
                            "YYYY/MM/DD HH:mm:ss"
                        );
                    });
                    this.total = res.data.total;
                } else {
                    this.$message.warning(res.data.errorMessage);
                }
            });
        },
    },
    created() {
        if (this.$route.path.indexOf("monitoringStation") == -1) {
            this.isBtn = false;
        }
    },
    mounted() {
        // 25879642
        // 1323823278949634049
        this.getdata();
        
    },
};
</script>

<style scoped lang="scss">
.ZYF-deviceinfo {
    width: 98%;
    height: 100%;
    padding: 2%;
    box-sizing: border-box;
    .deviceinfo-from {
        padding: 10px 0;
        display: flex;
        justify-content: space-between;
    }

    .tableclass {
        width: 100%;
        height: 86%;
    }

    .content-bottom {
        // margin-top: 12px;
        width: 100%;
    }

    .page-box {
        float: right;
    }
}

.Yellclass {
    color: springgreen;
}
.sousuobtn {
    background-color: #189580;
    border-color: #189580;
    padding: 0 10px;
}

/* 表单样式 */
::v-deep.ZYF-deviceinfo .ant-form-item {
    margin-bottom: 0;
}
::v-deep.ZYF-deviceinfo .deviceinfo-from .ant-form-item {
    width: 300px;
}
::v-deep.ZYF-deviceinfo .deviceinfo-from .ant-form {
    width: 80%;
    display: flex;
}
/* 表格样式 */
.handle {
    width: 100%;
    color: #207064;
    display: flex;
    justify-content: space-around;
    align-items: center;
    line-height: 1.4;
}

.handle > span:hover {
    cursor: pointer;
    color: aquamarine;
}

::v-deep.ZYF-deviceinfo .ant-table-thead > tr > th {
    background-color: #207064;
    color: #9fb043;
    border-bottom: 0;
    border-radius: 0;
}

/* 图表 */
.line-echarts {
    width: 100%;
    height: 300px;
}
.echarts-title {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
    text-align: center;
    padding: 10px 0;
    box-sizing: border-box;
}
</style>
